import React, {useRef} from 'react';
import type {ProColumns, ActionType} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {isSuccess} from "@/utils/utils";
import {DesignerManager} from "@/services/api-functions";
import {SYS_ENUMS} from "@/utils/constants";

export interface DesignerListProps {
  type: 'CUSTOMIZE' | 'CREATE',
  registrationType: 'CUSTOMIZE' | 'ORIGINAL' | 'RECOMMEND' | 'CERTIFICATION'
}


const DesignerList: React.FC<DesignerListProps> = ({type, registrationType}) => {

  const actionRef = useRef<ActionType>();
  const columns: ProColumns[] = [
    {
      title: '用户名',
      dataIndex: 'realName',
      ellipsis: true,
      width: 120,
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      ellipsis: true,
      width: 120,
    },
    {
      title: '作品数量',
      dataIndex: 'worksNum',
      hideInSearch: true,
      width: 100,
    },
    {
      title: '文章数量',
      dataIndex: 'articleNum',
      hideInSearch: true,
      width: 100,
    },
    {
      title: '资源数量',
      dataIndex: 'resourcesNum',
      hideInSearch: true,
      width: 100,
    },
    {
      title: '人气',
      dataIndex: 'experienceNum',
      hideInSearch: true,
      width: 100,
    },
    {
      title: '获赞',
      dataIndex: 'greatNum',
      hideInSearch: true,
      width: 100,
    },
    {
      title: '粉丝',
      dataIndex: 'fansNum',
      hideInSearch: true,
      width: 100,
    },
    {
      title: '关注',
      dataIndex: 'focusNum',
      ellipsis: true,
      hideInSearch: true,
      width: 120,
    },
  ];

  const originalColumns: ProColumns[] = [{
    title: '资源收益',
    dataIndex: 'serverAmount',
    hideInSearch: true,
    width: 100,
  }, {
    title: '资源销量',
    dataIndex: 'serverTimes',
    hideInSearch: true,
    width: 100,
  },]

  const endColumns: ProColumns[] = [{
    title: '最后更新时间',
    dataIndex: 'gmtModified',
    valueType: 'dateTime',
    width: 170,
    hideInSearch: true,
  },
    {
      title: '最后更新时间',
      dataIndex: 'modifyTomeRange',
      valueType: 'dateTimeRange',
      width: 170,
      hideInTable: true,
    },
    {
      title: '申请时间',
      dataIndex: 'gmtCreate',
      valueType: 'dateTime',
      width: 170,
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInSearch: true,
      hideInForm: true,
      width: 270,
      fixed:'right',
      render: (_, record) => [
        <a key="edit" href={`/order/demand/list?designerId=${record.userId}`} target='_blank' rel="noreferrer">订单</a>,
        <a key="edit" href={`/member/user/detail/${record?.userId}`} target='_blank' rel="noreferrer">用户</a>,
      ],
    },];

  const customColumns: ProColumns[] = [
    {
      title: '用户名',
      dataIndex: 'realName',
      ellipsis: true,
      hideInTable: true,
      width: 120,
    },
    {
      title: '设计师',
      dataIndex: 'realName',
      ellipsis: true,
      hideInSearch: true,
      width: 120,
    },
    {
      title: '设计师等级',
      dataIndex: 'customizeLevel',
      ellipsis: true,
      valueEnum: SYS_ENUMS.LEVEL,
      hideInSearch: true,
      width: 100,
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      ellipsis: true,
      hideInSearch: true,
      width: 120,
    },
    {
      title: '地域',
      dataIndex: 'address',
      hideInSearch: true,
      width: 100,
    },
    // {
    //   title: '在线状态',
    //   dataIndex: 'designerStatus',
    //   hideInSearch: true,
    //   width: 100,
    // },
    {
      title: '接单状态',
      dataIndex: 'designerStatus',
      valueEnum: SYS_ENUMS.DESIGNER_STATUS,
      width: 100,
    },
    {
      title: '最后接单时间',
      dataIndex: 'lastOrderTimeRange',
      valueType: 'dateTimeRange',
      width: 170,
      hideInTable: true,
    },
    {
      title: '注册时间',
      dataIndex: 'registerTimeRange',
      valueType: 'dateTimeRange',
      width: 170,
      hideInTable: true,
    },
    {
      title: '接单总收入',
      dataIndex: 'totalIncome',
      hideInSearch: true,
      width: 100,
    },
    {
      title: '接单总数',
      dataIndex: 'orderNum',
      hideInSearch: true,
      width: 100,
    },
    {
      title: '服务客户数',
      dataIndex: 'partyNum',
      hideInSearch: true,
      width: 100,
    },
    {
      title: '评价数',
      dataIndex: 'serverTimes',
      ellipsis: true,
      hideInSearch: true,
      width: 100,
    },
    {
      title: '服务评分',
      dataIndex: 'serverScore',
      ellipsis: true,
      hideInSearch: true,
      width: 100,
    },
    {
      title: '案例数量',
      dataIndex: 'caseNum',
      ellipsis: true,
      hideInSearch: true,
      width: 100,
    },
    {
      title: '最后接单时间',
      dataIndex: 'lastOrderTime',
      ellipsis: true,
      hideInSearch: true,
      width: 150,
    },
    {
      title: '注册时间',
      dataIndex: 'gmtCreate',
      ellipsis: true,
      hideInSearch: true,
      width: 150,
    },{
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInSearch: true,
      hideInForm: true,
      width: 270,
      fixed:'right',
      render: (_, record) => [
        <a key="edit" href={`/order/demand/list?designerId=${record.userId}`} target='_blank' rel="noreferrer">订单</a>,
        <a key="edit" href={`/member/user/detail/${record?.userId}`} target='_blank' rel="noreferrer">用户</a>,
        <a key="edit" href={`/designer/detail/${record?.id}`} target='_blank' rel="noreferrer">详情</a>,
      ],
    }
  ];

  const queryCreateList = async (params: any) => {
    const query = {...params, designerQueryType: type, designerType: registrationType}

    if (params.modifyTomeRange) {
      query.lastModEnd = params.modifyTomeRange[1]
      query.lastModStart = params.modifyTomeRange[0]
      delete query.modifyTomeRange
    }

    const {data: {data, total}, code}: any = await DesignerManager.managerList(query);

    return {data: data || [], success: isSuccess(code), total: isSuccess(code) ? total : 0};
  }

  const queryCustomList = async (params: any) => {
    const query = {...params}

    if (params.lastOrderTimeRange) {
      query.orderTimeStart = params.lastOrderTimeRange[0]
      query.orderTimeEnd = params.lastOrderTimeRange[1]
      delete query.lastOrderTimeRange
    }
    if (params.registerTimeRange) {
      query.createStart = params.registerTimeRange[0]
      query.createEnd = params.registerTimeRange[1]
      delete query.registerTimeRange
    }

    const {data: {data, total}, code}: any = await DesignerManager.customizeList(query);

    return {data: data || [], success: isSuccess(code), total: isSuccess(code) ? total : 0};
  }
  return (
    <>
      <ProTable<any, any>
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        request={async (params) => type === "CUSTOMIZE" ? queryCustomList(params) : queryCreateList(params)}
        columns={type === 'CUSTOMIZE' ? customColumns : [...columns, ...(registrationType === 'ORIGINAL' ? originalColumns : []), ...endColumns]}
        scroll={{x: 1300}}
      />
    </>
  );
};

export default DesignerList;
